<template>
  <!-- 新增储值 -->
  <div>
    <div style="display: flex; justify-content: space-between">
      <el-button type="primary" @click="dialogStoreVal = true">
        添加储值/充值卡
      </el-button>
      <el-button @click="$emit('send')">返回</el-button>
    </div>
    <!-- 储值卡展示列表 -->
    <div style="margin-top: 10px">
      <!-- 标签页 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="储值卡" name="prepaid" />
        <el-tab-pane label="充值卡" name="stored" />
      </el-tabs>
      <!-- 储值/充值卡展示表格 -->
      <div>
        <el-table :data="storeValList" :empty-text="emptyText">
          <el-table-column label="卡名称" prop="prepaid_name" />
          <el-table-column align="right" label="卡类型">
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.prepaid_type == 'prepaid' ? '储值卡' : '会员储值'
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="right" label="是否赠送礼包">
            <template slot-scope="scope">
              <div>
                {{ scope.row.is_gift == 'Y' ? '赠送礼包' : '不赠送礼包' }}
              </div>
            </template>
          </el-table-column>
          <!-- 自定义表头 -->
          <el-table-column align="right" label="操作">
            <template slot-scope="scope">
              <el-button type="danger" @click="delCard(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="display: flex; justify-content: space-between">
          <div></div>
          <el-pagination
            :current-page.sync="page"
            layout="prev, pager, next, jumper"
            :total="total"
            @current-change="getCardInfo"
          />
        </div>
      </div>
    </div>
    <!-- 储值/充值卡列表展示 -->
    <el-dialog title="添加储值卡" :visible.sync="dialogStoreVal">
      <div>
        <!-- 卡名称 -->
        <div class="flex_y_center" style="margin-bottom: 20px">
          <div class="inp_title">
            <span>*</span>
            卡名称：
          </div>
          <el-input
            v-model="cardForm.prepaid_name"
            placeholder="请输入卡名称"
            style="width: 25%"
          />
        </div>
        <!-- 卡类型 -->
        <div class="flex_y_center" style="margin-bottom: 20px">
          <div class="inp_title">
            <span>*</span>
            卡类型：
          </div>
          <el-select
            v-model="cardForm.prepaid_type"
            clearable
            placeholder="请选择卡类型"
          >
            <el-option label="储值卡" value="prepaid" />
            <el-option label="充值卡" value="stored" />
          </el-select>
        </div>
        <!-- 是否自定义储值 -->
        <div style="display: flex">
          <div class="inp_title">
            <span>*</span>
            是否自定义储值：
          </div>
          <div>
            <el-radio-group
              v-model="cardForm.is_custom"
              style="
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              "
            >
              <el-radio label="Y">是</el-radio>
              <el-radio label="N" style="margin: 15px 0">否</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 最小面额 -->
        <div
          v-show="cardForm.is_custom == 'Y'"
          class="flex_y_center"
          style="margin-bottom: 20px"
        >
          <div class="inp_title">
            <span>*</span>
            最小面额：
          </div>
          <div>
            <el-input
              v-model="cardForm.min_amount"
              placeholder="请输入最小面额"
            />
          </div>
        </div>
        <!-- 是选择赠赠品 -->
        <div v-show="cardForm.prepaid_type == 'stored'" style="display: flex">
          <div class="inp_title">
            <span>*</span>
            是否赠送礼包：
          </div>
          <div>
            <el-radio-group
              v-model="cardForm.is_gift"
              style="
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              "
            >
              <el-radio label="Y">赠送</el-radio>
              <el-radio label="N" style="margin: 15px 0">不赠送</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="searchForm">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getPrepaidList, addPrepaid, delPrepaid } from '@/api/storedValue'

  export default {
    data() {
      return {
        emptyText: ' ',
        activeName: 'prepaid', // prepaid储值卡，stored充值卡
        storeValList: [], // 存放获取到的储值卡列表
        page: 1,
        total: 10,

        dialogStoreVal: false, // 控制添加储值卡对话框显示隐藏
        cardForm: {
          prepaid_name: '', // 卡名称
          prepaid_type: '', // 卡类型
          is_custom: '', // 是否自定义储值
          min_amount: '', // 最小储值金额
          is_gift: '', // 是否赠送礼包
        },
        // 提示变量
        hint: {
          prepaid_name: '卡名称',
          prepaid_type: '卡类型',
          is_custom: '是否自定义储值',
        },
      }
    },
    watch: {
      // 监听对话框的关闭，如果关闭那么初始化 cardForm 的属性值
      dialogStoreVal(newValue) {
        if (!newValue) {
          for (let item in this.cardForm) {
            this.cardForm[item] = ''
          }
        }
      },
      // 根据用户选择的类型，设置是否赠送礼包
      'cardForm.prepaid_type'(newValue) {
        if (newValue == 'prepaid') {
          this.cardForm.is_gift = 'N'
        }
      },
      'cardForm.is_custom'(newValue, oldValue) {
        if (newValue == 'N' && oldValue == 'Y') {
          this.cardForm.min_amount = ''
        }
      },
    },
    mounted() {
      this.getCardInfo()
    },
    methods: {
      // 当点击标签时，获取对应的卡类型列表
      handleClick(e) {
        this.activeName = e.name
        this.getCardInfo()
      },
      // 储值卡/充值卡列表
      getCardInfo() {
        const loading = this.$loading({
          lock: true,
          target:
            this.storeValList.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        const params = {
          prepaid_type: this.activeName,
          page: this.page,
        }
        getPrepaidList(params).then((res) => {
          this.storeValList = res.data
          loading.close()
          if (res.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
      // 检索输入是否有遗漏
      searchForm() {
        for (let item in this.hint) {
          if (this.cardForm[item] == '') {
            this.$message.error(this.hint[item] + '未填写')
            return
          }
        }
        if (this.cardForm.is_custom == 'Y' && this.cardForm.min_amount == '') {
          this.$message.error('请输入自定义最小充值金额')
          return
        }
        if (
          this.cardForm.prepaid_type == 'stored' &&
          this.cardForm.is_gift == ''
        ) {
          this.$message.error('请选择礼包类型')
          return
        }

        this.addCard()
      },
      // 添加卡
      addCard() {
        addPrepaid(this.cardForm).then(() => {
          this.dialogStoreVal = false
          this.getCardInfo()
        })
      },
      // 删除卡
      delCard(row) {
        this.$confirm('确定要将该卡删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const params = {
              id: row.id,
            }
            delPrepaid(params).then(() => {
              this.$message.success('删除成功!')
              this.getCardInfo()
            })
          })
          .catch(() => {})
      },
    },
  }
</script>

<style scoped>
  .inp_title {
    width: 30%;
    text-align: right;
  }
  span {
    color: red;
  }
  .grid_5_column {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
  }
</style>
